<template>
  <div class="app-container paper-index">
    <div class="content-wrapper">
      <!-- 个人信息部分 -->
      <el-card class="info-card">
        <div slot="header" class="card-header">
          <span class="header-title">用户个人信息</span>
        </div>
        <div class="profile-container">
          <div class="profile-avatar">
            <img src="@/assets/logo/logo.png" alt="头像" class="avatar-img">
          </div>
          <div class="profile-details">
            <div class="detail-row">
              <span class="detail-label">用户名：</span>
              <span class="detail-value">{{ username }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">学号：</span>
              <span class="detail-value">{{ studentId }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">学院：</span>
              <span class="detail-value">{{ college }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">专业：</span>
              <span class="detail-value">{{ major }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">联系方式：</span>
              <span class="detail-value">{{ phone }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">邮箱：</span>
              <span class="detail-value">{{ email }}</span>
            </div>
          </div>
        </div>
      </el-card>

      <!-- 毕业论文信息部分 -->
      <el-card class="info-card" style="margin-top: 20px;">
        <div slot="header" class="card-header">
          <span class="header-title">毕业论文信息</span>
        </div>
        <div class="paper-container">
          <div class="paper-row">
            <span class="paper-label">论文题目：</span>
            <span class="paper-value">{{ paperTitle }}</span>
          </div>
          <div class="paper-row">
            <span class="paper-label">提交日期：</span>
            <span class="paper-value">{{ submissionDate }}</span>
          </div>
          <div class="paper-row">
            <span class="paper-label">论文状态：</span>
            <el-tag :type="paperStatusType" class="status-tag">
              {{ paperStatus }}
            </el-tag>
          </div>
          <div class="paper-row">
            <span class="paper-label">论文类型：</span>
            <span class="paper-value">{{ paperType }}</span>
          </div>
          <div class="action-buttons">
            <el-button type="primary" class="action-btn">编辑论文信息</el-button>
            <el-button type="success" class="action-btn">上传论文</el-button>
          </div>
        </div>
      </el-card>

      <!-- 论文成果介绍部分 -->
      <el-card class="info-card" style="margin-top: 20px;">
        <div slot="header" class="card-header">
          <span class="header-title">论文成果最终报告</span>
        </div>
        <div class="report-container">
          <div class="report-buttons">
            <el-button type="info" plain class="report-btn">提交内容</el-button>
            <el-button type="warning" plain class="report-btn">保存为草稿</el-button>
            <el-button type="danger" plain class="report-btn">保存记录</el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'YuYaQiPaperIndex',
  data() {
    return {
      // 用户信息
      username: '余雅琪',
      studentId: '116420220079',
      college: '工程技术学院',
      major: '数据科学与大数据专业',
      phone: '13559031722',
      email: '3205257902@qq.com',
      
      // 论文信息
      paperTitle: '基于深度学习的图像识别系统研究与实现',
      submissionDate: '2023-05-15',
      paperStatus: '已完成',
      paperStatusType: 'success',
      paperType: '学术论文'
    }
  },
  mounted() {
    // 页面加载完成后的初始化操作
  }
}
</script>

<style scoped>
/* 全局样式 */
.paper-index {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 20px;
}

/* 内容容器 */
.content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

/* 卡片通用样式 */
.info-card {
  border-radius: 8px;
  border: 1px solid #ebeef5;
  background: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 卡片头部样式 */
.card-header {
  padding: 14px 20px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
}

.header-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

/* 个人信息样式 */
.profile-container {
  padding: 20px;
  display: flex;
  align-items: center;
}

.profile-avatar {
  margin-right: 30px;
}

.avatar-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ebeef5;
}

.profile-details {
  flex: 1;
}

.detail-row {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.detail-label {
  font-weight: 600;
  color: #606266;
  margin-right: 20px;
  width: 80px;
}

.detail-value {
  color: #303133;
}

/* 论文信息样式 */
.paper-container {
  padding: 20px;
}

.paper-row {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.paper-label {
  font-weight: 600;
  color: #606266;
  margin-right: 20px;
  width: 80px;
}

.paper-value {
  color: #303133;
  flex: 1;
}

.status-tag {
  font-size: 12px;
  padding: 4px 10px;
}

.action-buttons {
  display: flex;
  margin-top: 20px;
}

.action-btn {
  margin-right: 15px;
}

/* 报告部分样式 */
.report-container {
  padding: 20px;
}

.report-buttons {
  display: flex;
}

.report-btn {
  margin-right: 15px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .profile-container {
    flex-direction: column;
    text-align: center;
  }
  
  .profile-avatar {
    margin-right: 0;
    margin-bottom: 20px;
  }
  
  .detail-row, .paper-row {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .detail-label, .paper-label {
    margin-right: 0;
    margin-bottom: 5px;
  }
  
  .action-buttons, .report-buttons {
    flex-direction: column;
  }
  
  .action-btn, .report-btn {
    margin-right: 0;
    margin-bottom: 10px;
  }
}
</style>